<template>
  <n-grid x-gap="8" y-gap="8" item-responsive cols="6">
    <n-gi span="6" v-if="obj.edit_type == 'new'">
      <div class="stitle">· 投稿信息 ·</div>
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">投稿首领：</div>
        <div class="_2_val">
          <n-select v-model:value="obj.boss" :options="obj.select_boss" />
        </div>
      </div>
    </n-gi>
    <n-gi span="6 600:3">
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">作业标题：</div>
        <div class="_2_val">
          <n-input
            v-model:value="obj.bz"
            :size="cfg.sizebtn"
            placeholder="请填写分P标题（可选）"
          ></n-input>
        </div>
      </div>
    </n-gi>
    <n-gi span="6 600:3">
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">作者名称：</div>
        <div class="_2_val">
          <n-input
            v-model:value="obj.user"
            :size="cfg.sizebtn"
            placeholder="请填写作者名称（必填）"
          ></n-input>
        </div>
      </div>
    </n-gi>
    <n-gi span="3">
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">B站地址：</div>
        <div class="_2_val">
          <n-input
            v-model:value="obj.bv"
            :size="cfg.sizebtn"
            placeholder="请填写视频地址（必填）"
          ></n-input>
        </div>
      </div>
    </n-gi>
    <n-gi span="3">
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">视频分P：</div>
        <div class="_2_val">
          <n-input-number
            v-model:value="obj.fp"
            :size="cfg.sizebtn"
            placeholder="选填 默认1"
          />
        </div>
      </div>
    </n-gi>
    <n-gi span="6">
      <div
        style="
          background-color: var(--banr-bg);
          padding: 10px 8px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          gap: 8px;
          flex-direction: column;
        "
      >
        <m-role
          :ban="['ghz']"
          :showwepon="true"
          :maxlimit="4"
          :data="obj.objrole"
          :listname="['主控', 'AI', 'AI', 'AI']"
        ></m-role>
      </div>
      <div style="margin-top: 8px"></div>
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">队伍遗物：</div>
        <div class="_2_val">
          <n-space>
            <template v-for="(item, key) in ywlist">
              <n-tag
                class="team_sstag"
                :class="{ m_tagbox_active: obj.yq?.includes(item) }"
                @click="ywclick(item)"
                >{{ item }}</n-tag
              >
            </template>
          </n-space>
        </div>
      </div>
      <div style="margin-top: 8px"></div>
      <div class="_banr">
        <div style="min-width: 75px" class="_2_title2">队伍属性：</div>
        <div class="_2_val">
          <n-space>
            <template v-for="(item, key) in sslist">
              <n-tag
                class="team_sstag"
                :class="{ m_tagbox_active: obj.tl?.includes(item) }"
                @click="ssclick(item)"
              >
                <template v-if="item == '五彩'">{{ item }} </template>
                <template v-else>{{ item }}</template>
              </n-tag>
            </template>
          </n-space>
        </div>
      </div>
    </n-gi>
    <n-gi span="6">
      <div class="stitle">· 说明内容 / 文字轴内容 ·</div>

      <n-input
        style="background-color: var(--banr-bg)"
        type="textarea"
        :rows="8"
        :size="cfg.sizebtn"
        v-model:value="obj.content"
        placeholder="请填写说明活连锁内容，如 柚子 1.1 > 火羊 1.2 > 角色 1.3 > 角色1.3"
      ></n-input>
    </n-gi>
  </n-grid>
</template>
<style scoped>
.ywimg {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: var(--ava2-bg);
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {
    obj: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const obj = props.obj;
    const ywlist = ["不填", "杯", "书"];
    const sslist = ["五彩", "火队", "水队", "土队", "光队", "暗队", "虚队"];
    const ssclick = (ss) => {
      obj.tl = ss;
    };
    const ywclick = (yw) => {
      obj.yq = yw;
    };
    obj.objrole = [];
    obj.select_boss = [];
    if (obj.boss_list?.length >= 1) {
      for (let i = 0; i < obj.boss_list.length; i++) {
        const data = obj.boss_list[i];
        obj.select_boss.push({
          label: `${data.name} (${data.element}属性)`,
          value: data.name,
        });
      }
      if (obj.boss_click != null) {
        obj.boss = obj.boss_click;
      }
    }
    if (obj.icon?.length >= 1) {
      for (let i = 0; i < 4; i++) {
        const data = {
          i: obj.icon[i] ?? "本专",
        };
        data.w = obj.weapon[data.i];
        obj.objrole.push(data);
      }
    }
    return { ywclick, ssclick, sslist, ywlist, cfg };
  },
};
</script>
